<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表行随机变色</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            height: 300px;
            text-align: center;
            margin: 50px auto;
        }

        table {
            width: 100%;
            height: 250px;
            text-align: center;
            margin: 50px auto;
            border-collapse: collapse;
        }

        h1 {
            margin-bottom: 20px;
        }

        td,
        th {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="box">
        <table>
            <caption>
                <h1>就业信息统计表</h1>
            </caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>就业岗位</th>
                    <th>薪资</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>刘德华</td>
                    <td>男</td>
                    <td>23</td>
                    <td>前端工程师</td>
                    <td>15000</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>刘德华</td>
                    <td>男</td>
                    <td>23</td>
                    <td>前端工程师</td>
                    <td>15000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>刘德华</td>
                    <td>男</td>
                    <td>23</td>
                    <td>前端工程师</td>
                    <td>15000</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>刘德华</td>
                    <td>男</td>
                    <td>23</td>
                    <td>前端工程师</td>
                    <td>15000</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>刘德华</td>
                    <td>男</td>
                    <td>23</td>
                    <td>前端工程师</td>
                    <td>15000</td>
                </tr>
            </tbody>
        </table>
        <div class="bt"><button>点击切换颜色</button></div>
    </div>

    <script>
        const colorArr = [
            'skyblue',
            'red',
            'blue',
            'green',
            'yellow',
            'bisque',
            'aqua',
            'aliceblue',
        ];
        // 获取标签元素
        const btn = document.querySelector('button');
        const tr = document.querySelectorAll('tr');

        // 绑定点击事件
        btn.addEventListener('click', function (e) {
            // foreach循环遍历tr标签，给标签设置随机背景颜色
            tr.forEach((value) => {
                value.style.backgroundColor = `${colorArr[getRandom(0, colorArr.length - 1)]}`;
            });
        });

        // 随机函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        };

    </script>
</body>

</html>